<template>
  <div class="block" >
    <el-col :span="8" >
      <div style="height: 500px;">
        <el-steps direction="vertical" :active="1">
          <el-step class="stepss"
                   v-for="(step,index) in steps"
                   :key="index"
                   :title="step.title"
                   :description="step.description"
                   :status="step.status"
                   @click.native="changeShowItems(step.items)"
          ></el-step>
        </el-steps>
      </div>
    </el-col>
    <el-col :span="12" push="0">
      <el-timeline >
        <el-timeline-item v-for="(item,index) in showItems"
                          :key="index"
                          :timestamp= "item.timestamp"
                          :placement="top"
                          :color="item.color"
        >
          <el-card>
            <h4>{{item.title}}</h4>
            <p>{{item.text}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'Report for repair',
  data () {
    return {
      showItems: [],
      steps: [
        {
          title: '审核',
          description: '审核内容',
          status: 'success',
          items: [
            {
              timestamp: '2018/4/12',
              title: '填写基本信息',
              text: '张三 提交于 2018/4/12 20:46',
              color: '#0bbd87'
            },
            {
              timestamp: '2018/4/12',
              title: '填写报修类型,提交图片等',
              text: '张三 提交于 2018/4/13 20:46',
              color: '#b81454'
            },
            {
              timestamp: '2018/4/12',
              title: '提交报修申请',
              text: '张三 提交于 2018/4/14 20:46',
              color: '#0743ff'
            },
            {
              timestamp: '2018/4/12',
              title: '管理人员审核',
              text: '李四 审核于 2018/4/14 20:46',
              color: '#5eff07'
            },
            {
              timestamp: '2018/4/12',
              title: '审核结果',
              text: '李四 审核于 2018/4/15 20:46',
              color: '#ff0707'
            }
          ]
        },
        {
          title: '维修中',
          description: '维修流程',
          status: 'process ',
          items: [
            {
              timestamp: '2018/4/12',
              title: '报修表单出工',
              text: '王五 提交于 2018/4/16 20:46',
              color: '#0bbd87'
            },
            {
              timestamp: '2018/4/12',
              title: '购置材料',
              text: '王五 购置材料 2018/4/17 20:46',
              color: '#b81454'
            },
            {
              timestamp: '2018/4/12',
              title: '维修中',
              text: '王五 维修中 2018/4/18 20:46',
              color: '#0743ff'
            },
            {
              timestamp: '2018/4/12',
              title: '完工表单提交',
              text: '王五 提交于 2018/4/19 20:46',
              color: '#0743ff'
            }
          ]
        },
        {
          title: '售后中',
          description: '售后结果',
          status: 'error ',
          items: [
            {
              timestamp: '2018/4/12',
              title: '完工表单处理',
              text: '赵六 提交于 2018/4/12 20:46',
              color: '#0bbd87'
            },
            {
              timestamp: '2018/4/12',
              title: '出工费用结算',
              text: '赵六 提交于 2018/4/12 20:46',
              color: '#b81454'
            },
            {
              timestamp: '2018/4/12',
              title: '完工说明',
              text: '赵六 提交于 2018/4/12 20:46',
              color: '#0743ff'
            },
            {
              timestamp: '2018/4/12',
              title: '用户评价',
              text: '赵六 提交于 2018/4/12 20:46',
              color: '#0743ff'
            }
          ]
        }
      ]
    }
  },
  methods: {
    changeShowItems (items) {
      this.showItems = items
    }
  }
}
</script>

<style scoped>
.stepss:hover{
  cursor: pointer;
}
</style>
